<template>
  <div class="videoDialogContainer">
    <div class="videoDialogHeader">
      <ul class="tabs">
        <li
            v-for="item in dialogMenus"
            :key="item.id"
            @click="handleActiveLi(item.id)"
            :class="{ isActive: item.isActive }"
        >
          {{ item.name }}
        </li>
      </ul>
      <span>
        <CloseIcon @click="handleClose" style="color: white;" size="20px"/>
      </span>
    </div>
    <div v-if="videoStore.isLoad"  style="width: 100%;box-sizing: border-box;padding: 10px 15px;">
      <t-skeleton  animation="gradient" :row-col="rowCol"></t-skeleton>
    </div>

    <div v-else class="dialogContent">
      <div class="reviewContainer" v-if="dialogMenus[1].isActive">
        <span class="commentCount">全部评论({{ videoStore.reviewList.length }})</span>
        <div class="commentContent">
          <div class="reviewList">
            <t-list :split="true">
              <t-list-item v-for="(item, index) in videoStore.reviewList" :key="index">
                <template #content>
                  <t-comment
                      :avatar="item.avatar"
                      :author="item.author"
                      :datetime="item.datetime"
                      :content="item.content"
                  >
                    <template #actions>
                      <t-space key="thumbUp" :size="6">
                        <t-icon name="thumb-up" />
                        <span>6</span>
                      </t-space>
                      <t-space key="chat" :size="6">
                        <t-icon name="chat" />
                        <span>回复</span>
                      </t-space>
                    </template>
                  </t-comment>
                </template>
              </t-list-item>
            </t-list>
          </div>
          <Input @handleSend="handleAddReview" class="commentInput" />
        </div>
      </div>

      <div class="zuoPinContainer" v-if="dialogMenus[0].isActive">
        <div class="zuoPinHeader">
          <div class="zuopinHeaderLeft">
            <span style="font-size: 15px;color: white;cursor:pointer;" @click="handleUserName(videoStore.authorInfo.authorId)">@{{videoStore.authorInfo.authorName}}</span>
            <div style="  transition: 0.3s;width: 100%">
              <span>
                    <t-statistic :animation="{duration :1000 , valueFrom: 0}" :animationStart="true" style="font-size: 11px" :value="176059" unit="粉丝"  />
              </span>

              <t-divider style="background-color: white" layout="vertical" />
              <span>
                       <t-statistic :animation="{duration :1000 , valueFrom: 0}" :animationStart="true" style="font-size: 11px" :value="video.likeNumber" unit="获赞"  />
              </span>
            </div>
          </div>
          <t-button @click="handleOperate(video , 4 , 1)"  v-if="!video.isGuanZhu" size="small" theme="primary">
            <template #icon><AddIcon /></template>
            关注
          </t-button>
          <t-button @click="handleOperate(video , 4 )" v-else size="small" theme="primary">
<!--            <template #icon><MinusIcon /></template>-->
            取关
          </t-button>
        </div>
        <ul class="videoList">
          <li v-for="(item, index) in videoStore.videoList" :key="index" @click="handleChangeVideo(item.videoId)">
            <img style="width: 100%;object-fit: cover;
height: 100%" :src="item.fengMian" alt="">
            <div class="videoMessage">
              <div style="color:white;font-size: 18px">
                <HeartIcon />
                <span style="font-size: 12px;font-weight: bolder;margin-left: 3px">
                  <t-statistic  style="font-size: 11px" :value="item.likeNumber"  />
                </span>
              </div>
              <div v-if="item.isPlaying" class="playing">
                <div class="loader" style="transform: scale(0.6)">
                </div>
                <div style="font-size: 12px;font-weight: normal;color: #e7e7ed;transform: translateY(-4px)">播放中</div>
              </div>
            </div>
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="jsx">
import Input from "@/components/Input.vue";
import { CloseIcon , AddIcon , HeartIcon , MinusIcon} from "tdesign-icons-vue-next";
import {nextTick, onMounted, ref, toRefs, watch} from "vue";
import {reqAddReview, reqUserVideoList, reqVideoList} from "@/api/video/index.js";
import {MessagePlugin} from "tdesign-vue-next";
import {useVideoStore} from "@/stores/modules/video";
const videoStore = useVideoStore()
const emit = defineEmits(['handleVisablechange' , 'handleChangeVideo']);
const userInfo = ref({})

import {useUserStore} from "@/stores/modules/user.js";
import {useRouter} from "vue-router";

const router = useRouter()
const userStore = useUserStore();
const handleClose = () => {
  emit('handleVisablechange', false);
}

const handleUserName = (id) => {
  window.open("/userIndex?userId=" + id)
}

const rowCol = [
  [
    { type: 'circle', size: '50px' },
    { type: 'rect', margin: '20px 0', width: '80%', height: '30px' },
    { type: 'rect', marginLeft: '20px', width: '80px', height: '30px', content: '' },
  ],
  1,
  1,
  { type: 'text', width: '70%', margin: '0 0 16px 0' },
  {
    type: 'rect',
    width: '100%',
    height: '300px',
    content: () => (
        <div class="row-col-content">
          <h3 class="row-col-content__header"></h3>
          <section class="row-col-content__content"> </section>
        </div>
    ),
  },
];

// 发送评论时
const handleAddReview = async (content) => {
  const obj = {
    videoId: props.videoId,
    reviewContent: content
  }
  const res = await reqAddReview(obj);
  if (res.code === 200) {
    MessagePlugin.success("评论成功！")
    videoStore.reviewList.unshift({avatar: userStore.avatar, author: userStore.nickName , datetime: '刚刚' ,content: content})
  }
}


const videoList =ref([])
// 方式2：保留响应性（推荐）
const props = defineProps(['video' , 'videoId' , 'userId' , 'isAllFullScreen'])
const { video } = toRefs(props);

onMounted(() => {

})

const handleOperate = (video , type , operate) => {
  emit('handleOperate', video ,  type , operate);
}

// 点击切换视频时
const handleChangeVideo = async (id) => {
  // await getVideoList({userId: videoStore.authorInfo.authorId, type:5})
  videoList.value.forEach(item =>
      item.isPlaying = item.videoId == id)
  emit('handleChangeVideo', id);
}

const getVideoList = async (obj) => {
  let isContinue = false
  const res = await reqVideoList(obj);
  if (res.code == 200) {
    if (res.data.length > 0) {
      videoStore.videoList =res.data
    } else {
      MessagePlugin.success({content: '已经到底啦！'})
      nextTick(() => {
      })
    }
  } else {
    MessagePlugin.error({content: '获取视频列表失败！'})
  }
}

// 激活选项卡时
const handleActiveLi = (id) => {
  dialogMenus.value.forEach((item) => {
    item.isActive = item.id == id;
  })
}

const dialogMenus = ref([
  {
    name: 'TA的作品',
    isActive: true,
    id: 1
  },
  {
    name: '评论',
    isActive: false,
    id: 2
  }
]);
</script>

<style scoped>
/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  height: 20px;
  --c:no-repeat radial-gradient(farthest-side,white 93%,#0000);
  background:
      var(--c) 0    0,
      var(--c) 50%  0;
  background-size: 8px 8px;
  position: relative;
  clip-path: inset(-200% -100% 0 0);
  animation: l6-0 1.5s linear infinite;
}
.loader:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background: white;
  left: -16px;
  top: 0;
  animation:
      l6-1 1.5s linear infinite,
      l6-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
.loader:after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  animation: l6-3 1.5s linear infinite;
}
@keyframes l6-0 {
  0%,30%  {background-position: 0  0   ,50% 0   }
  33%     {background-position: 0  100%,50% 0   }
  41%,63% {background-position: 0  0   ,50% 0   }
  66%     {background-position: 0  0   ,50% 100%}
  74%,100%{background-position: 0  0   ,50% 0   }
}
@keyframes l6-1 {
  90%  {transform:translateY(0)}
  95%  {transform:translateY(15px)}
  100% {transform:translateY(15px);left:calc(100% - 8px)}
}
@keyframes l6-2 {
  100% {top:-0.1px}
}
@keyframes l6-3 {
  0%,80%,100% {transform:translate(0)}
  90%         {transform:translate(26px)}
}

.playing {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bolder;
  flex-direction: column;
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.3);
}

.videoMessage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  padding:0 5px;
}

.videoList li {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.videoList img {
  transition: 0.4s;
}

.videoList li:hover img {
  transform: scale(1.2);
}

.videoList {
  margin-top: 5px;
  display: grid;
  grid-template-columns: 3fr 3fr 3fr;
  gap: 10px;
  grid-auto-rows: 134px; /* 所有隐式行统一高度 */
  overflow: scroll;
  flex: 0 auto;
}


.zuoPinContainer {
  color: #c0c0d6;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.zuopinHeaderLeft {

}

.zuoPinHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 auto;
}

.zuoPinHeader ::v-deep(.t-button--variant-base.t-button--theme-primary ) {
  background-color: red;
  border: none;
}.zuoPinHeader ::v-deep(.t-statistic-content-value ) {
  font-size: 14px;
}
.videoMessage ::v-deep(.t-statistic-content-value ) {
  font-size: 12px;
}.videoMessage ::v-deep(.t-statistic-content  ) {
  height: 10px;
}

::v-deep(.t-divider--vertical) {
  border-left: 1px solid grey !important;
}

.videoDialogContainer {
  width: 340px; /* 固定宽度 */
  min-width: 340px; /* 防止被压缩 */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* 防止内容溢出 */
  transition: width 0.3s ease; /* 平滑过渡 */
}

.videoDialogHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  color: #c0c0d6;
  flex-shrink: 0; /* 防止头部被压缩 */
}

.tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabs li {
  padding: 10px 15px;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  white-space: nowrap; /* 防止文字换行 */
}

.tabs .isActive {
  border-bottom-color: red;
  color: white;
}

.dialogContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: rgb(235, 235, 235);
  padding: 10px 15px;
  overflow: hidden; /* 防止内容溢出 */
  box-sizing: border-box;
}

.reviewContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* 修复flex布局中的高度问题 */
}

.commentCount {
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
}

.commentContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* 修复flex布局中的高度问题 */
}
::v-deep(.t-list__inner) {
  overflow-x: hidden;

}
.reviewList {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
  margin-bottom: 10px;
}

.commentInput {
  flex-shrink: 0; /* 防止输入框被压缩 */
}

/* 深度选择器样式保持不变 */
::v-deep(.t-list) {
  background: transparent !important;
}
::v-deep(.t-list--split .t-list-item::after) {
  background: transparent !important;
}
::v-deep(.t-comment__avatar) {
  margin-right: 15px;
}
::v-deep(.t-comment__avatar-image) {
  width: 40px;
  height: 40px;
}
</style>
